import 'package:flutter/material.dart';

class StepperDemo extends StatefulWidget {
  StepperDemo({Key key}) : super(key: key);

  @override
  _StepperDemoState createState() => _StepperDemoState();
}

class _StepperDemoState extends State<StepperDemo> {

  int _currentStep = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("StepperDemo"),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Theme( // 覆盖主题样式
              data: Theme.of(context).copyWith(
                primaryColor: Colors.green,
              ), 
              child: Stepper(
                currentStep: _currentStep,
                onStepTapped: (value) { // 点击事件
                  setState(() {
                    _currentStep = value;
                  });
                },
                onStepContinue: () { // 点击继续按钮
                  setState(() {
                    _currentStep < 2 ? _currentStep += 1 : _currentStep = 0;
                  });
                },
                onStepCancel: () { // 点击取消按钮
                  setState(() {
                    _currentStep > 0 ? _currentStep -= 1 : _currentStep = 2;
                  });
                },
                steps: [
                  Step(
                    title: Text("Login"), 
                    subtitle: Text("login first."),
                    content: Text("You do not have any primessions, Please Do Login First..."),
                    isActive: _currentStep == 0,
                  ),
                  Step(
                    title: Text("Choose plan"), 
                    subtitle: Text("Choose you plan."),
                    content: Text("You do not have any primessions, Please Do Login First..."),
                    isActive: _currentStep == 1,
                  ),
                  Step(
                    title: Text("Confirm payment"), 
                    subtitle: Text("confirm your payment method."),
                    content: Text("You do not have any primessions, Please Do Login First..."),
                    isActive: _currentStep == 2,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}